<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <ul class="container">

    </ul> -->
    <table border="">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 第一个 ：把数组里的数据通过li显示出来
        // var arr = ["张三","李四","王五","王小二"];
        // // 通过arr 来拼接 html结构
        // var htmlstr = "";
        // for(var i=0;i<arr.length;i++){
        //     var str = '<li>'+arr[i]+'</li>';
        //     htmlstr += str;
        // }
        // console.log(htmlstr);
        // var ulEle = document.querySelector(".container");
        // ulEle.innerHTML = htmlstr;



        // 第二个根据 对象数组生成 table
        var arr = [{
            name: "张三",
            age: 20
        }, {
            name: "李四",
            age: 30
        },
        {
            name: "王五",
            age: 20
        },{
            name: "王小二333",
            age: 20
        }]
        var htmlstr = "";
        for(var i=0;i<arr.length;i++){
            // console.log(arr[i]);
            htmlstr += '<tr><td>'+arr[i].name+'</td><td>'+arr[i].age+'</td></tr>';
        }
        console.log(htmlstr);
        var tbodyEle = document.querySelector("tbody");
        tbodyEle.innerHTML = htmlstr;


    </script>
</body>

</html>